import {memo, useEffect, useState} from "react";
import SingStyle from "./SingStyle";
import {Button} from "antd";
import SingCoverItem from "../../../../components/part/singCoverItem/SingCoverItem";
import FilterBar from "../../../../components/part/filterBar/FilterBar";
import {useNavigate} from "react-router-dom";
import {DictData} from "../../../../interface/SysDictDataInterface";
import {UserPageDTO, UserVO} from "../../../../interface/UserInterface";
import {getUserListByPage} from "../../../../services/user";
import {getSysDictData} from "../../../../services/sysDictData";
import {getFollowSingerByUserIdApi} from "../../../../services/followSinger";

type propsType = {}
export default memo(function Sing(props: propsType) {
  //路由跳转
  const navigate=useNavigate();
  //地区筛选列表字段
  const [areaList,setAreaList]=useState<DictData[]>([]);
  //歌手列表
  const [singList,setSingList]=useState<UserVO[]>([]);
  //关注歌手列表，用于头部展示
  const [followSingList,setFollowSingList]=useState<UserVO[]>([]);
  /** 用户id */
  const userId:number=parseInt(localStorage.getItem("yf_gaduation_zzmusic_user_id") as string);
  function getUserList(params:UserPageDTO) {
    getUserListByPage(params).then((result:any)=>{
      console.log(result);
      setSingList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
  }
  //请求数据
  useEffect(() => {
    getUserList({pageNum:0,pageSize:10,type:1});
    //请求地区字典
    getSysDictData({dictType:"area_type"}).then((result:any)=>{
      console.log(result);
      setAreaList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
    //获取用户关注的歌手
    getFollowSingerByUserIdApi({pageNum:1,pageSize:4,userId}).then((result:any)=>{
      console.log(result);
      setFollowSingList(result.data.data.data);
    },(error)=>{
      console.log(error);
    });
  }, []);

  /**
   * 跳转歌手详情页方法
   * @param index 数组下标
   */
  function navSingerDetails(id:number) {
    navigate("/home/compositepages",{state:{type:4,id}});
  }

  /**
   * 跳转我的音乐页面中的关注页
   */
  function navSingerList() {
    navigate("/mine/follow");
  }

  function filterBarCallback(data:any) {
    console.log(data);
    if (data){
      getUserList({pageNum:0,pageSize:10,type:1,nationalityId:data.sysDictDataId});
    }else{
      getUserList({pageNum:0,pageSize:10,type:1});
    }
  }
  return (
    <SingStyle>
      {/*头部*/}
      <div className="sing-head-box">
        {
          userId?
            <ul className="follow_sing_box">
              {
                Array.from(Array(3),(item:any,index)=>{
                  return(<li onClick={()=>{
                    navSingerDetails(followSingList[index].userId)
                  }} style={{backgroundImage:`url(${followSingList[index]?.cover})`}}></li>)
                })
              }
              {
                Array.from(Array(1),(item:any,index)=>{
                  return(<li onClick={()=>{
                    navSingerList()
                  }} style={{backgroundImage:`url(${followSingList[followSingList.length-1]?.cover})`}}></li>)
                })
              }
            </ul>
            :
            <div className="sing-head-info">
              <h1>万千歌手,尽在眼前</h1>
              <h3>请登陆后查看关注的歌手</h3>
              <Button className="login-btn" onClick={()=>{
                navigate("/login");
              }}>立即登录</Button>
            </div>

        }
      </div>
      {/*主体,主体的宽度为90%*/}
      <main className="sing-content-box">
        {/*<div className="sing-screen-navbar">*/}
        {/*根据引英文字母筛选*/}
        {/*<FilterBar*/}
        {/*  defaultBtn={"全部"}*/}
        {/*  filterList={letterList}*/}
        {/*/>*/}
        {/*根据地区筛选*/}
        <FilterBar
          filterList={areaList}
          defaultBtn={"全部"}
          callbackFunction={filterBarCallback}
        />
        {/*根据性别 和 组合筛选*/}
        {/* <FilterBar*/}
        {/*    defaultBtn={"全部"}*/}
        {/*    filterList={kindList}*/}
        {/* />*/}
        {/*  歌手展示*/}
        <div className="sing-cover-box">
          {
            singList.map((item,index)=>{
              return (
                <SingCoverItem
                  key={index}
                  singId={item.userId}
                  singName={item.realname}
                  singCover={item.cover}
                  isRadius={true}
                  size={150}
                />)
            })
          }
        </div>
      </main>
      {/*</div>*/}
    </SingStyle>
  );
})
